<template>
  <div>
      <v-card hover>
          <div id="l-map" class="l-map"></div>
          <div id="r-result"><v-text-field id="suggestId" v-model="tmp"></v-text-field></div>
      </v-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map: '',
      points: [
        {"lng":116.418261,"lat":39.921984,"price":50}
      ],
      ac: '',
      tmp: '',
      myValue: ''
    }
  },
  mounted () {
    function G(id) {
		return document.getElementById(id);
	  }
    let tvm = this
    this.map = new BMap.Map('l-map')
    this.map.centerAndZoom(new BMap.Point(121.48789948569473, 31.24916171001514), 11);
    //this.map.enableScrollWheelZoom()
    this.ac = new BMap.Autocomplete(    //建立一个自动完成的对象
      {"input" : "suggestId"
      ,"location" : tvm.map
    });
    this.ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
      var _value = e.fromitem.value;
      var value = "";
      if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
      }    
      str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
      
      value = "";
      if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
      }    
      str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
     
    });
    tvm.ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    console.log(_value)
      tvm.myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
      tvm.tmp = tvm.myValue
      // G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + tvm.myValue;
      
      setPlace();
    });

    function setPlace(){
      tvm.map.clearOverlays();    //清除地图上所有覆盖物
      function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        tvm.map.centerAndZoom(pp, 18);
        tvm.map.addOverlay(new BMap.Marker(pp));    //添加标注
      }
      var local = new BMap.LocalSearch(tvm.map, { //智能搜索
        onSearchComplete: myFun
      });
      local.search(tvm.myValue);
    }
    
  }
}
</script>
<style scoped>
.l-map{
    width:  100%;
  height:  500px;
  overflow:  hidden;
  margin:  0;
  font-family:  "微软雅黑";
}
</style>
